<template>
  <div class="balance">
    <div class="balance-top">
      <p class="tip">账户收益</p>
      <div class="put">
        <p class="price">￥{{allEarnings}}</p>
        <p class="btn" @click="router({path: './inviteEarn'})">提现</p>
      </div>
    </div>      
    <tab
      class="tab"
      active-color = "#43A047"
      custom-bar-width = "2rem"
      >
      <tab-item selected @on-item-click="onItemClick(1)">收益记录</tab-item>
      <tab-item @on-item-click="onItemClick(2)">提现记录</tab-item>
    </tab>
    <div v-if="tabIndex === 1" class="put-forward">
      <div class="item" v-for="(item, index) in info" :key="index">
        <div class="left">
          <p class="title"><em>{{item.user.nickname}}</em> 消费了{{item.order_money}}元</p>
          <p class="time">{{item.create_time | formatDate}}</p>
        </div>
        <div class="right active">+{{item.money}}</div>
      </div>
    </div>
    <div v-if="tabIndex === 2" class="put-forward">
      <div class="item" v-for="(item, index) in tixain" :key="index">
        <div class="left">
          <p class="title">提现(已成功)</p>
          <p class="time">{{item.create_time | formatDate}}</p>
        </div>
        <div class="right active">+{{item.withdrawal_money}}</div>
      </div>
    </div>
    <div class="none" v-show="noDate">
      <img src="@/assets/kongzhuangtai.png" alt="">
      <p>暂无结果</p>
    </div> 
  </div>
</template>

<script type="text/javascript"> 
  import { getEarningsLog, personCenter, getWithLog } from '@/api/api';
  import { Tab, TabItem } from 'vux'
  import { formatDate } from '@/util/date'
  export default {
    filters: {
      formatDate(time) {
        if(!time){return;}
        let date = new Date(time*1000);
        return formatDate(date, 'yyyy.MM.dd hh:mm:ss');
      }
    },
    components: {
      Tab, 
      TabItem
    },
    data () {
      return {
        tabIndex: 1,
        price: '',
        noDate: false,
        allEarnings: '',
        info: [],
        tixain: [],
      }
    },
    created () {
      this.uid = sessionStorage.getItem('uid');
      this.price = this.$route.query.price
      this.getEarningsLog();
      this.person_center();
      this.get_with_log();
    },
    methods: {    
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        this.noDate = false;
        this.tabIndex = index
        this.get_with_log()
        this.getEarningsLog();
      },
      getEarningsLog() {
        getEarningsLog(this.uid).then((res) => {
          this.info = res.data.info
          if(res.data.info == 0 && this.tabIndex == 1){
            this.noDate = true;
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
      person_center() {
        personCenter(this.uid).then((res) => {
          this.allEarnings = res.data.info.allEarnings
        }).catch((err) => {
          console.log(err)
        })
      },
      get_with_log() {
        getWithLog(this.uid).then((res) => {
          this.tixain = res.data.info
          if(res.data.info == 0 && this.tabIndex == 2){
            this.noDate = true;
          }
          console.log(res)
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .balance
    width 100vw
    height 100vh
    background-color #f5f7fa
    .balance-top
      padding 3rem 1.5rem
      margin-bottom 1rem
      background-color #fff
      .tip
        line-height 1.6rem
        font-size 1.5rem
        color #999999
      .put
        display flex
        margin-top 1.4rem
        .price
          font-size 3.6rem
          color #FE9700
          height 3.2rem
          line-height 3.2rem
          overflow hidden
          flex 1
          font-weight bold
          position relative
          left -.6rem
        .btn
          max-width 6rem
          height 3.2rem
          background-color #43A047
          border-radius .4rem
          flex 1
          text-align center
          line-height 3.2rem
          color #fff
          font-size 1.5rem
    .put-forward
      background-color #fff 
      .item
        display flex
        margin 0 1.5rem
        border-bottom 1px solid #e5e5e5
        &:last-child
          border none
        .left
          flex 1
          max-width 70%
          box-sizing border-box
          padding-top 2.65rem
          .title
            font-size 1.5rem
            color #333
            font-weight 500
            line-height 1.9rem
          .time
            color #999
            font-size 1.2rem
            margin-top .8rem
            line-height 1.5rem
        .right
          min-width 30%
          max-width 30%
          text-align right
          line-height 9.5rem
          color #333
          font-size 1.5rem
        .right.active
          color #FE9700
    .none
      img
        width 21.5rem
        position relative
        left 50%
        margin-left -10.75rem
        padding-top 5rem
      p
        color #999
        font-size 1.2rem
        text-align center
        margin-top 4rem
</style>